iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 15
1
Modern Web

讓0基礎的你也能製作簡單wordpress主題系列 第 15

文章分類頁面的上頁按鈕?下頁按鈕?看完這篇你就會設定了

  • 分享至 

  • xImage
  •  

更改內容概要字數限制

我們回到昨天內容概要的部分,你會注意到,顯示的字數並不多,這是因為,wordpress把內容概要的字數限制,設定為55個(若把wordpress語言設定了為英文,那麼每一個英文詞語會為一個字,若把語言設定了為中文,那麼每一個英文字會為一個字,很奇怪對吧),

wordpress字數限制

我們該怎樣改變這設定呢?我們可以透過在function內,加設編碼,來修改wordpress原先的設定。

完整編碼:

function custom_excerpt_length( $length ) {
	return 200;
}
add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );

編碼解釋:

$length: 當中的$,代表著這是一個變數,簡單而言,他就是可以隨著你的設定,而去改變它的數值。而我們這裡特別指明了$length,目的就是讓系統知道,這次我們只是想更改length的數值,其他並不希望修改。

return 200: 對於我們需要什麼數值,我們可以在這裡設定,return您可以理解成數學的=符號,不過這裡有點特別的是,假若後面還有一個return,那麼就只有前方的那個,系統是會看到,例如:

function custom_excerpt_length( $length ) {
	return 200;
    return 150;
}

那麼系統就只會看到200,但不會看到150。

add_filter: 在修改內容概要長度時,必需要用到的編碼,加入後就能夠讓wordpress系統,根據你上方的指令,把字數更改到你理想的範圍。

999: 為優先度,數值越大,優先度就會越高,這樣wordpress系統就會優先採納,你對於內容概要長度的設定,假若沒有設定,有時候,會被wordpress系統的設定蓋過,這樣就會看不到有任何變化了。

結果

設定後就會像這樣:

更改字數限制後的結果

加入連結

總要有read more 等連結,讓用家能夠看到文章的完整內容吧,不然把所有文章也是沒用,看不到內容又有什麼用呢?

完整編碼:

<a href="<?php the_permalink();?>"> Read more </a>

編碼解釋:

你會看到這篇碼,和平常加入超連結的方法並沒有什麼不同,都是使用html 的 a href, 分別就只是在於,中間多了php the permalink()這個編碼,來代替一般的連結。透過這個編碼,wordpress就會在每個列出的文章,都會自動添加一個能夠連接到那個文章頁面的連結,非常方便

結果:

成功的話,當你按下連結,你會進入一個什麼都沒有的畫面,不過為什麼是空空的?我們不是有放文章內容嗎?這是因為我們並沒有在負責文章的single.php,輸入什麼編碼,所以當然什麼也看不到吧。

設定每頁顯示的文章上限

假若你有一百遍文章,然後還把所有文章,放置到同一個版面,這可就苦了用家了,真不知道用家,要向下看多久,才會看到,自己想看到的文章呢。

這個設定並不難,甚至可以編碼也不用,就可以實現了/images/emoticon/emoticon07.gif

點擊,設定,然後點選閱讀,在blog顯示最多那裡,設定你希望每頁顯示多少文章,然後按底下的儲存變更就可以了,是不是很簡單呢^^

如何設定,每頁可最多顯示多少文章

結果如下:

設定後,文章就會跟隨你的設定,而改變顯示的最大文章數量

加入下頁按鈕

的確,現在只列出了三篇文章,但其他呢?這樣設定後,不是會看不到嗎/images/emoticon/emoticon02.gif

別緊張,我們還可以加入按鈕,來讓用家可以翻到下頁的,不過這裡有個複雜版和簡單版,我們這裡就先來說,較簡單的下頁按鈕吧,至於數字按鈕我們明天再說明。不過要注意的是,因為我們並不是要在每個列出的文章,都有這個按鈕,我們只希望在頁面的底部,能夠有按鈕,讓用家可以翻到下一頁,所以我們只需要放到index.php/archive.php就可以了

下頁按鈕

這個較為簡單,只需要兩個編碼,就能夠做到,我們來看看下方的編碼吧,

完整編碼

 <?php previous_posts_link('PREVIOUS »', 0);?>
 <?php next_posts_link( 'NEXT »', 0);?>

編碼解釋

previous的編碼代表著前一頁,而next的編碼代表著後一頁。我們可以透過改變括號內的第一部份'PREVIOUS »',來改變這連結,最後會顯示出來的文字。假若不想設定,編碼則需要寫成:

<?php next_posts_link();?>

這樣就會按照系統的預設來顯示,看下圖:

只放置previous_posts_link,不加設()時,會為系統預設,中文會出現後一頁

假若加入了( 'NEXT »', 0),則會是這樣子:

加設next後,會改變連結文字為next

至於數字0,則是要來設定,您希望最多,顯示多少頁的。

最後,大家可以用一個div class="container ", ,把上方的編碼包裹著,這樣就會和上方列出的文章分開了

加入class

雖然能夠自然生成是很好,很理想,但因為沒有了class,我們沒辦法改變一下這按鈕的樣式,我們可以透過分function,為按鈕插入class,這樣我們就可以修改了。

完整編碼:


function posts_link_attributes() {
  return 'class="styled-button"';
}

add_filter('next_posts_link_attributes', 'posts_link_attributes');
add_filter('previous_posts_link_attributes', 'posts_link_attributes');
 

這個編碼和更改內容概要長度的編碼,也是相近,就只是把名字更改了,然後這次我們不再需要設定$,這是因為posts_link_attributes本身就是我們想改的地方了,不需要再特別指明。

接下來就是需要在style.css加入編碼就可以了,我們透過google開發者工具就會看到它在:a.styled-button,接著只需要像之前那樣加入編碼修改就可以了,例如希望改變background-color

a.styled-button{ background-color: aquamarine;}

這裡也給大家一個網站,讓大家哪怕不太懂css,也可以透過這網站,生成並加入css:https://html-css-js.com/css/generator/

修改樣式

確實現在,該有的大概都算是有了,不過這樣的樣式,未免太難看吧,還記得我們之前在學bootstrap時製作的card嗎,我們可以把之前的設定,套用到這裡去,沒看過的,可以按這裡。並且,我們可以在read more 的超連結裏加入class,來改變顏色,例如:class="btn btn-info",及加入role="button",方便使用閱讀器的用家。

因為我們是希望每個列出的文章,都能夠套用到這格式,所以我們可以把他放到,文章的loop裏,把標題到連結的部分,包裹著。至於相片的部分,待我們為文章版面加入樣式,並能夠加設封面圖片時,再補加吧。

這裡需要留意的是,container和row必須要在循環的外邊,不然就不能由左至右排列。

編碼參考:

<div class="container">
 <div class="row">
 <?php if(have_posts()): while( have_posts()):the_post(); ?>
  <div class="col-md-6 col-lg-4 mb-3"> 
      <div class="card" >
        <div class="card-body">
         <h3 class="card-title"><?php the_title();?></h3>
         <p class="card-text"> <?php the_excerpt();?></p>
         <a  class="btn btn-info" role= "button" href="<?php the_permalink();?>"> Read more </a>
        </div>
      </div>
    </div>
   <?php endwhile; else: endif;?>
  </div>
</div>

完成後就會像這樣子:

文章經bootstrap後,能左至右列出

至於數字按鈕的部分,將會在我晚點更新的文章提及。


上一篇
【Day14】讓新手的你也會利用loop ,把wordpress文章漂亮地排列出來(第一部分)
下一篇
[Day16]不會the_posts_pagination ? 看這邊就對了,讓新手的你也會很酷地去設定
系列文
讓0基礎的你也能製作簡單wordpress主題30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言